<template>
	<view class="page-change-background-promotion page-common">
		<view class="main-box flex-column-start-center">
			<image class="photo-img" :src="activeSrc"></image>
			<view class="bg-list flex-start-center">
				<view class="bg-item" :style="{
					backgroundColor: item.bgColor,
				}" v-for="(item,i) in imageItems" :key="item.bgColor"></view>
				<image class="finger" :style="{
					left: `calc(4rpx + ${activeColorIndex * 52}px)`,
				}" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/finger.gif"></image>
			</view>
		</view>
		<u-gap height="20rpx"></u-gap>
		<view class="normal-title text-center">证件照一键更换底色</view>
		<u-gap height="80rpx"></u-gap>
		<view @click="toChangeBg" class="upload-btn">上传图片 | 马上换底色</view>
	</view>
</template>
<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		computed,
		onMounted,
		onUnmounted,
	} from "vue";
	const imageItems = [{
			src: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/photo-white.jpg",
			bgColor: "#FFFFFF",
		},
		{
			src: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/photo-red.jpg",
			bgColor: "#D43030",
		},
		{
			src: "https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/photo-blue.jpg",
			bgColor: "#4591E6",
		},
	];
	const activeColorIndex = ref(0);
	const activeSrc = computed(() => {
		return imageItems[activeColorIndex.value].src;
	});
	const toChangeBg = () => {
		uni.navigateTo({
			url: '/pages/change-background/change-background'
		})
	}
	
	let timer = null;
	onMounted(() => {
		timer  = setInterval(() => {
			if (activeColorIndex.value === 2) {
				activeColorIndex.value = 0;
			} else {
				activeColorIndex.value++;
			}
		}, 1000)
	});
	onUnmounted(() => {
		clearInterval(timer);
	});
</script>

<style lang="scss" scoped>
	.page-change-background-promotion {
		padding: 96rpx;

		.main-box {
			gap: 96rpx;
			height: 864rpx;
			background: rgba(0, 0, 0, 0.4);
			padding: 120rpx 160rpx 120rpx 160rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
		}

		.photo-img {
			width: 280rpx;
			height: 392rpx;
			box-shadow: 0px 16rpx 32rpx rgba(0, 0, 0, 0.1);
		}

		// 手指切换动画
		// @keyframes fingerAnimation {
		// 	// 多加一个开始帧，用于开始的跳跃
		// 	0% {
		// 		left: 4rpx;
		// 	}

		// 	33% {
		// 		left: 4rpx;
		// 	}

		// 	66% {
		// 		left: calc(4rpx + 104rpx);
		// 	}

		// 	100% {
		// 		left: calc(4rpx + 208rpx);
		// 	}
		// }

		.bg-list {
			background: rgba(255, 255, 255, 1);
			padding: 32rpx;
			width: 344rpx;
			height: 136rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			position: relative;
			gap: 32rpx;

			.bg-item {
				width: 72rpx;
				height: 72rpx;
				border: 1px solid rgba(229, 229, 229, 1);
				border-radius: 50%;
				box-sizing: border-box;
			}

			.finger {
				width: 214rpx;
				height: 164rpx;
				position: absolute;
				left: 4rpx;
				top: 16rpx;
				// animation: fingerAnimation 3s;
				// animation-iteration-count: infinite;
				// animation-timing-function: step-start;
			}
		}

		.upload-btn {
			width: 474rpx;
			margin: 0 auto;
			background: rgba(69, 145, 230, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 32rpx 0;
			border-radius: 12rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 48rpx;
			color: rgba(255, 255, 255, 1);
		}
	}
</style>